<template>
  <div id="app">
    <header>
      <h1>掷骰子游戏模拟器</h1>
      <p class="subtitle">概率论与数理统计实践应用</p>
    </header>
    <main>
      <DiceSimulator />
    </main>
    <footer>
      <p>© 2025 概率论课程设计</p>
    </footer>
  </div>
</template>

<script>
import DiceSimulator from './components/DiceSimulator.vue'

export default {
  name: 'App',
  components: {
    DiceSimulator
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  background-color: #f5f8fa; /* 更柔和的背景色 */
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); /* 舒适的蓝色渐变 */
  color: #fff; /* 白色文字 */
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  color: #fff; /* 白色标题 */
}

.subtitle {
  margin: 10px 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
  color: #fff; /* 白色副标题 */
}

main {
  flex: 1;
  padding: 30px 20px;
}

footer {
  background: linear-gradient(135deg, #3a7bd5 0%, #6dd5fa 100%); /* 与头部相协调的蓝色渐变 */
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 0.9rem;
}

footer p {
  margin: 0;
}
</style>
